<template>
  <div class="page">
    <Navbar title="评价" />
    <div class="content">
      <div class="record-item">
        <div class="f-r a-c">
          <div class="name">
            服务类型：{{ detail.projectType }}
          </div>
          <div class="name">
            评价对象：{{ detail.realname }}
          </div>
        </div>
        <div class="title">满意</div>
        <div class="f-r j-c">
          <van-rate
            v-model="form.satisfaction"
            allow-half
            :size="25"
            color="#F47526"
            void-icon="star"
            void-color="#eee"
          />
        </div>
        <div class="line" />
        <div>
          <el-input v-model="form.content" type="textarea" />
        </div>
        <div class="button-list f-r a-c j-b">
          <div
            v-for="item in buttonList.slice(0,3)"
            :key="item.id"
            :class="['button-item f-r a-c j-b', item.checked ? 'active' : '']"
            @click="addButton(item)"
          >
            <div>
              {{ item.name }}
            </div>
            <img :src="item.checked ? item.iconActive : item.icon" alt="">
          </div>

        </div>
        <div class="button-list f-r a-c j-b">
          <div
            v-for="item in buttonList.slice(3,6)"
            :key="item.id"
            :class="['button-item f-r a-c j-b', item.checked ? 'active' : '']"
            @click="addButton(item)"
          >
            <div>
              {{ item.name }}
            </div>
            <img :src="item.checked ? item.iconActive : item.icon" alt="">
          </div>

        </div>
      </div>
      <el-button type="primary" style="width: 100%;margin-top: 15px" @click="onSave">确认提交</el-button>
    </div>
  </div>
</template>

<script>
import { http_project, http_evaluation } from '@/api'
import { progressStatus } from '@/eumn'
import { Toast } from 'vant'

export default {
  name: 'Help',
  data() {
    return {
      buttonList: [
        { checked: false, id: 1, name: '速度快', icon: require('@/assets/my/zan.png'), iconActive: require('@/assets/my/zan_active.png') },
        { checked: false, id: 2, name: '服务好', icon: require('@/assets/my/zan.png'), iconActive: require('@/assets/my/zan_active.png') },
        { checked: false, id: 3, name: '技术强', icon: require('@/assets/my/zan.png'), iconActive: require('@/assets/my/zan_active.png') },
        { checked: false, id: 4, name: '诚信优', icon: require('@/assets/my/zan.png'), iconActive: require('@/assets/my/zan_active.png') }
      ],
      activeBtn: [],
      form: {
        projectId: '',
        tableName: '',
        satisfaction: 5,
        content: ''
      },
      detail: {}
    }
  },
  created() {
    const { projectId, tableName, id, types } = this.$route.query
    this.form.tableName = tableName
    this.form.projectId = projectId
    this.form.id = id
    http_project.helpDetail({
      id: id,
      types
    }).then(res => {
      console.log(res)
      this.detail = {
        ...res.data,
        progressName: progressStatus.getName(res.data.progress)
      }
    })
  },
  methods: {
    addButton(item) {
      item.checked = !item.checked
    },
    onSave() {
      http_evaluation.create({
        ...this.form,
        choice: JSON.stringify(this.buttonList.filter(el => el.checked).map(el => el.id))
      }).then(res => {
        Toast(res.msg)
        this.$router.back()
      })
    }
  }
}
</script>

<style scoped lang="scss">

.button-list {
    .button-item {
        margin-top: 16px;
        width: 78px;
        height: 25px;
        background: #ffffff;
        border: 1px solid #999999;
        border-radius: 13px;
        padding: 0 10px;
        font-size: 12px;
        color: #999999;
        img {
            width: 18px;
            height: 16px;
        }
    }
    .button-item.active {
        background: #DEECFF;
        color: #3E8FFD;
        border-color:#3E8FFD;
    }
}

.record-item {
    padding: 20px 24px;
    border-radius: 10px;
    overflow: hidden;
    background-color: #fff;
    position: relative;
    .line {
        height: 1px;
        background-color:#C5C5C5;
        border-bottom: 1px solid #C5C5C5;
        margin: 30px 0;
    }
    .name{
        height: 11px;
        font-size: 11px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        margin-right: 20px;
    }
    .title {
        margin-top: 36px;
        margin-bottom: 19px;
        text-align: center;
        height: 19px;
        font-size: 20px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
    }
}

</style>
